﻿@model String
@using Urs.Core;
@{
    //register CSS and JS
    //Html.AddCssFileParts("~/admin/content/fileuploader.css");
    //Html.AddScriptParts("~/admin/scripts/fileuploader.js");

    //other variables
    var random = CommonHelper.GenerateRandomInteger();
    var clientId = "picture" + random;
}
<div id="@(clientId + "value")">
    @Html.HiddenFor(x => x)
</div>
<div id="@(clientId + "image")" class="pictures_upload"></div>
<span id="@(clientId + "remove")" class="t-button" style="display:none;">@T("Admin.Picture.RemovePicture")</span>
<br />
<div id="@clientId"></div>
<script type="text/javascript">
    $(function () {
        $(function () {
            var image@(clientId)Value=new Array();

            var uploader@(clientId) = new qq.FileUploader({
                element: document.getElementById('@clientId'),
                action: '@(Url.Content("~/Admin/Picture/AsyncUpload"))',
                onComplete: function (id, fileName, responseJSON) {
                    if (responseJSON.success) {
                        $image = $("#@(clientId + "image")");
                        $values = $("#@(clientId + "value") input");
                        $image.html($image.html() + "<img src='" + responseJSON.imageUrl + "'/>");

                        image@(clientId)Value.push(responseJSON.pictureId);
                        var imageValues='';
                        for(var i=0;i<image@(clientId)Value.length;i++){
                            imageValues+=image@(clientId)Value[i]+",";
                        }
                        imageValues=imageValues.substring(0,imageValues.length-1);
                        $values.val(imageValues);
                        $("#@(clientId + "remove")").show();
                    }
                },
                strings: {
                    upload: "@T("Common.FileUploader.Upload")",
                    drop: "@T("Common.FileUploader.DropFiles")",
                    cancel: "@T("Common.FileUploader.Cancel")",
                    failed: "@T("Common.FileUploader.Failed")"
                }
            });

            $("#@(clientId + "remove")").click(function (e) {
                $("#@(clientId + "image")").html("");
                $("#@(clientId + "value") input").val("");
                $(this).hide();
            });
        });
    });
</script>
